<template>
    <div class="divBox">
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <div class="container">
            <el-form inline size="small">
              <el-form-item label="商家：">
                <el-select
                  v-model="listPram.shopId"
                  clearable
                  class="selWidth"
                  placeholder="请选择商家"
                  @change="handerSearch"
                >
                  <el-option
                    v-for="item in shopList"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </el-form>
          </div>
          <router-link :to="{ path: '/chuzhi/setCreat' }">
            <el-button size="small" type="primary" class="mr10">添加规则</el-button>
          </router-link>
        </div>
        <el-table
          v-loading="listLoading"
          :data="listData"
          size="mini"
          class="table"
          highlight-current-row
          :header-cell-style=" {fontWeight:'bold'}">
          <el-table-column prop="id" label="ID" min-width="50" />
          <el-table-column prop="name" label="名称" min-width="180" />
          <el-table-column prop="shopName" label="商家" min-width="180" />
          <el-table-column prop="price" label="充值金额" min-width="180" />
          <el-table-column prop="giveMoney" label="赠送金额" min-width="180" />
          <el-table-column
            label="状态"
            min-width="150"
            >
            <template slot-scope="scope">
                <el-switch
                v-model="scope.row.status"
                :active-value="true"
                :inactive-value="false"
                active-text="开启"
                inactive-text="关闭"
                @change="onchangeIsShow(scope.row)"
                />
          </template>
        </el-table-column>
          <el-table-column
            label="优惠券"
            show-overflow-tooltip
            min-width="250"
          >
          <template slot-scope="scope">
              <div v-for="(item, index) in scope.row.coupon" :key="index">
                <h4>{{item.name}}</h4>
                </div>
            </template>
        </el-table-column>
          <el-table-column prop="updateTime" label="更新时间" min-width="180" />
          <el-table-column
            label="操作"
            min-width="100"
            fixed="right"
            align="center"
          >
            <template slot-scope="scope">
              <router-link
                :to="{ path: '/chuzhi/setCreat/' + scope.row.id }"
              >
                <el-button size="small" type="text" class="mr10">编辑</el-button>
              </router-link>
              <el-button
                type="text"
                size="small"
                @click="handlerDelete(scope.row)"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </el-card>
    </div>
  </template>
  
  <script>
  import { getRuleList, updateStatus, delRule } from "@/api/chongzhi.js";
  import { shopListApi } from '@/api/shopPoint';
  import edit from "./edit";
  export default {
    components: { edit },
    data() {
      return {
        listPram: {
          shopId: '',
        },
        listData: [],
        listLoading: true,
        shopList: []
      };
    },
    mounted() {
      this.handlerGetListData(this.listPram);
      this.getShopList()
    },
    methods: {
        async getShopList() {
        shopListApi ({
          page: 1,
          limit: 100,
          status: 1,
          temp: new Date().getTime()
        }).then(res=>{
          this.shopList = res.list;
        })
      },
      handerSearch() {
        this.handlerGetListData(this.listPram);
      },
      handlerGetListData(pram) {
        this.listLoading = true
        getRuleList(pram).then((data) => {
          this.listData = data;
          this.listLoading = false
        });
      },

      handlerDelete(rowData) {
        this.$confirm("确定删除当前数据", "提示").then((result) => {
            delRule(rowData.id).then(() => {
            this.$message.success("删除数据成功");
            this.handerSearch();
          });
        });
      },
      onchangeIsShow(row) {
        updateStatus({id:row.id, status: row.status})
          .then(async () => {
            this.$message.success('修改成功');
            this.handerSearch()
          }).catch(()=>{
          row.status = !row.status
        })
      },
    },
  };
  </script>
  
  <style scoped lang="scss">
  .articleModal {
    z-index: 333 !important;
  }
  </style>
  